<template>
  <view class="paragraph-list">
    <view
      v-for="(paragraph, index) in paragraphList"
      :key="index"
      class="paragraph-item"
    >
      <view class="paragraph-title">
        <view class="paragraph-split-line" />
        <text>{{ paragraph.title }}：</text>
      </view>
      <view class="paragraph-content">{{ paragraph.content }}</view>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  props: {
    paragraphList: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style lang="less">
.paragraph-list {
  margin-top: 26rpx;

  .paragraph-item {
    &:not(:last-child) {
      margin-bottom: 26rpx;
    }

    .paragraph-title {
      display: flex;
      align-items: center;
      margin-bottom: 4rpx;
      .paragraph-split-line {
        width: 8rpx;
        height: 1em;
        margin-right: 4rpx;
        background-color: rgba(134, 118, 255, 0.4);
      }
    }
  }
}
</style>
